<template>
  <div class="container">
    <div class="title">
      <span>{{sinfo.titleName}}</span>
    </div>
    <el-form :model='searchList' ref='searchList' size='normal'>
      <el-row :gutter='20'>
        <el-col :span='4' :offset='0'>
          <el-input v-model="searchList.name" placeholder="单位名称" size="normal" clearable></el-input>
        </el-col>
        <el-col :span='5' :offset='0'>
          <el-input v-model="searchList.project_name" placeholder="项目名称" size="normal" clearable></el-input>
        </el-col>
        <el-col :span='5' :offset='0'>
          <el-input v-model="searchList.contract_name" placeholder="合同名称" size="normal" clearable></el-input>
        </el-col>
        <el-col :span='4' :offset='0'>
          <el-cascader :options="d_serveAll" v-model="searchList.type" placeholder="资产类型" clearable class="wid">
          </el-cascader>
        </el-col>
        <el-col :span='6' :offset='0'>
          <div class='right'>
            <el-button type='primary' size='medium' @click='search'>查询</el-button>
            <el-button type='primary' size='medium' @click='onAdds'>添加选中项</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <br>
    <el-table :data='tableData.results' border stripe :height='offsetHeight' v-loading='loading' ref='tableData'>
      <el-table-column type='selection' width='50' align='center'>
      </el-table-column>
      <el-table-column type='index' label='序号' width='50' align='center'>
      </el-table-column>
      <el-table-column prop="name" label="单位名称" align='center'></el-table-column>
      <el-table-column prop="project_name" label="项目名称" align='center'></el-table-column>
      <el-table-column prop="contract_name" label="合同名称" align='center'></el-table-column>
      <el-table-column label="名称" align='center' width="120" show-overflow-tooltip>
        <template slot-scope="{row}">
          {{row.word_list ? row.word_list:row.device_name}}
        </template>
      </el-table-column>
      <el-table-column label="类型" width="120" align='center'>
        <template slot-scope="{row}">
          {{row.type | f_ITtypeRename}}
        </template>
      </el-table-column>
      <el-table-column prop="service_pre_amount" label="申请金额" width="80" align='center'></el-table-column>
      <el-table-column prop="third_check_amount" label="审核金额" width="80" align='center'></el-table-column>
      <el-table-column label='操作' width='180' align='center'>
        <template slot-scope='{row}'>
          <el-button-group>
            <el-button type="primary" size="mini" @click="deviceInfo(row.id)" v-if="row.device_name">查看信息</el-button>
            <el-button type="primary" size="mini" @click="serveInfo(row.id)" v-else-if="row.type">查看信息
            </el-button>
            <el-button type="primary" size="mini" @click="wordInfo(row)" v-else>查看信息</el-button>
            <el-button type="success" size="mini" @click="onAdd(row.id)" v-if="tableSwitch">添加
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="pageSizeChange" @current-change="pageNoChange" :page-sizes="[10, 50, 100, 200]"
        :page-size="10" background layout="total, sizes, prev, pager, next" :total="tableData.totalRecord">
      </el-pagination>
    </div>
    <!-- 工程量清单 -->
    <el-drawer title="工程量清单" :visible.sync="wordShow" size="70%" :destroy-on-close="true" append-to-body
      :wrapperClosable="false">
      <word-list-item ref="wordList" @cancel="cancel" @init="init" :form-list="wordParams">
      </word-list-item>
    </el-drawer>
    <!-- 软硬件信息 -->
    <el-drawer title="软、硬件信息" :visible.sync="deviceShow" size="70%" center :destroy-on-close="true" append-to-body
      :wrapperClosable="false">
      <device-item :device-params="deviceParams" @cancel="cancel" @init="init"></device-item>
    </el-drawer>
    <!-- 购买服务信息 -->
    <el-drawer title="购买服务信息" :visible.sync="serveShow" size="70%" center :destroy-on-close="true" append-to-body
      :wrapperClosable="false">
      <serve-item :serve-params="serveParams" @cancel="cancel" @init="init"></serve-item>
    </el-drawer>
  </div>
</template>

<script>
import { d_serveAll } from '@/utils/dicts'
import { f_ITtypeRename } from '@/utils/filters'
import WordListItem from '@/components/Bid/WordList.vue'
import DeviceItem from '@/components/ItUsual/Device'
import ServeItem from '@/components/ItUsual/Serve'
import TargetVarItem from '@/components/Bid/TargetVar.vue'

export default {
  name: 'EditIt',
  components: {
    WordListItem, DeviceItem, ServeItem, TargetVarItem
  },
  props: {
    switch: {
      type: Boolean,
      default: () => {
        return false
      }
    },
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 230,
      sinfo: {
        titleName: ''
      },
      loading: false,
      searchList: {},
      tableData: [],
      pageNo: '1',
      pageSize: '10',
      unitType: [],
      d_serveAll: d_serveAll,
      word_check: ['LA00532', 'LA00535', 'LA00588', 'L0002'],
      wordShow: false,
      wordParams: {},
      deviceShow: false,
      deviceParams: {},
      serveShow: false,
      serveParams: {},
    }
  },
  created () {

  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.sinfo = JSON.parse(sessionStorage.getItem("bidInfo"));
      this.loading = true
      const res = await this.$http('blockItPage', {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: '2',
        source: this.sinfo.source,
        del_flag: '0',
        ...this.searchList,
        type: this.serveType
      })
      this.tableData = res
      this.loading = false
    },
    search () {
      this.pageNo = '1'
      this.pageSize = '10'
      this.init()
    },
    cancel () {
      this.wordShow = false
      this.wordParams = {}
      this.deviceShow = false
      this.deviceParams = {}
      this.serveShow = false
      this.serveParams = {}
    },
    deviceInfo (id) {
      this.deviceShow = true
      this.deviceParams = {
        deviceId: id,
      }
    },
    serveInfo (id) {
      this.serveShow = true
      this.serveParams = {
        serveId: id,
      }
    },
    wordInfo (item) {
      this.wordParams = {
        id: item.id,
        word_list: item.word_list,
        type: JSON.parse(item.type),
        word_type_other: item.word_type_other,
        service_pre_amount: item.service_pre_amount,
        third_check_amount: item.third_check_amount,
        service_content: item.service_content
      }
      this.wordShow = true
    },
    onAdds () {
      if (this.$refs.tableData.selection.length > 0) {
        let ids = []
        this.$refs.tableData.selection.forEach(item => {
          ids.push(item.id)
        })
        this.$confirm('是否确认添加', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.add(ids)
        }).catch(() => {

        });
      } else {
        this.$tips.error('请选择至少一条')
      }
    },
    onAdd (id) {
      this.$confirm('是否确认添加', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let ids = []
        ids.push(id)
        this.add(ids)
      }).catch(() => {

      });

    },
    async add (ids) {
      this.loading = true
      const res = await this.$http('blockItAdd', {
        subject_id: this.sinfo.id,
        ids: ids,
      })
      this.$tips.success(res.errmsg)
      this.init()
    },
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.init()
    },
  },
  computed: {
    // unitName () {
    //   if (this.searchList.Name && this.searchList.Name.length > 0) {
    //     return this.searchList.Name[0]
    //   }
    // },
    // projectName () {
    //   if (this.searchList.Name && this.searchList.Name.length > 1) {
    //     return this.searchList.Name[1]
    //   }
    // },
    // contractName () {
    //   if (this.searchList.Name && this.searchList.Name.length > 2) {
    //     return this.searchList.Name[2]
    //   }
    // },
    serveType () {
      if (typeof this.searchList.type === 'object') {
        return JSON.stringify(this.searchList.type)
      }
    },
    tableSwitch () {
      return this.switch
    }
  },
  filters: {
    f_ITtypeRename: f_ITtypeRename
  }
}
</script>
<style lang='scss' scoped>
</style>
